<template>
    <div class="health-management">
      <!-- 导航栏 -->
      <van-nav-bar 
        title="健康管理方案" 
        left-arrow 
        left-text="返回"
        @click-left="$router.back()"
      />
  
      <div class="content">
        <!-- 方案标题 -->
        <div class="header">
          <h2>高血压居家健康管理方案</h2>
          <div class="time-range">2019-12-01~2020-12-01</div>
        </div>
  
        <!-- 药物方案 -->
        <van-cell-group inset title="药物方案">
          <van-cell>
            <div class="medicine-item">
              <div class="medicine-title">
                <span class="name">1.二甲双胍</span>
                <span class="spec">2mg*12片</span>
              </div>
              <div class="usage">
                <van-tag type="primary">每日一次</van-tag>
                <span>每次2mg</span>
                <span class="time">早餐前服用</span>
              </div>
            </div>
          </van-cell>
        </van-cell-group>
  
        <!-- 运动方案 -->
        <van-cell-group inset title="运动方案">
          <div class="sub-title">运动建议</div>
          <van-cell title="运动频率" value="每周至少3次" />
          <van-cell title="运动时长" value="每周至少100分钟" />
          <van-cell title="运动强度">
            <template #value>
              <div class="sport-intensity">
                中等强度为宜，包括健步走，慢跑，骑车以及小球类运动
              </div>
            </template>
          </van-cell>
        </van-cell-group>
  
        <!-- 饮食方案 -->
        <van-cell-group inset title="饮食方案">
          <div class="sub-title">饮食建议</div>
          <van-cell title="总热量" value="1800-2000千卡/天" />
          <van-cell title="蛋白类" value="60-80g/天" />
          <van-cell title="碳水类" value="250-300g/天" />
          <van-cell title="食谱建议">
            <template #value>
              <div class="recipe">
                低盐低脂饮食，增加膳食纤维摄入，建议食用...
              </div>
            </template>
          </van-cell>
          <div class="upload-section">
            <van-uploader 
              v-model="fileList"
              multiple
              :max-count="3"
              upload-icon="photo-o"
              upload-text="上传图片"
            >
              
            </van-uploader>
          </div>
        </van-cell-group>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { 
    NavBar, 
    CellGroup, 
    Cell, 
    Tag, 
    Uploader 
  } from 'vant';
  
  const fileList = ref([
    {
      url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg',
      status: 'done',
      message: '示例图片'
    }
  ]);
  </script>
  
  <style scoped>
  .health-management {
    background-color: #f7f8fa;
    min-height: 100vh;
  }
  
  .content {
    padding: 16px;
  }
  
  .header {
    margin-bottom: 20px;
    h2 {
      font-size: 18px;
      color: #323233;
      margin-bottom: 8px;
    }
    .time-range {
      font-size: 12px;
      color: #969799;
      letter-spacing: 0.5px;
    }
  }
  
  .sub-title {
    padding: 10px 16px;
    color: #646566;
    font-size: 14px;
  }
  
  .medicine-item {
    .medicine-title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      .name {
        font-weight: 500;
        font-size: 15px;
      }
      .spec {
        color: #969799;
        font-size: 13px;
      }
    }
    .usage {
      display: flex;
      align-items: center;
      gap: 8px;
      .van-tag {
        flex-shrink: 0;
      }
      .time {
        color: #969799;
        font-size: 12px;
      }
    }
  }
  
  .upload-section {
    padding: 16px;
    :deep(.van-uploader) {
      width: 100%;
      .van-uploader__upload {
        margin: 0;
        width: 100px;
        height: 100px;
        .van-uploader__upload-icon {
          font-size: 24px;
        }
      }
    }
  }
  
  .sport-intensity,
  .recipe {
    color: #646566;
    font-size: 13px;
    line-height: 1.5;
  }
  
  .van-cell-group__title {
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 8px;
  }
  </style>